<template>
  <div class="add-node-btn-box flex justify-center" v-if="showButton">
    <div class="add-node-btn">
      <el-popover placement="right" trigger="click" width="300" popper-class="add-node-btn-box-popover">
        <template #default>
          <div class="condition-box">
            <div>
              <div class="condition-icon" @click="handleAddApprovalNode">
                <el-icon class="iconfont approver">
                  <!-- 假设 Avatar 是导入的图标，这里需正确导入 -->
                  <Avatar/>
                </el-icon>
              </div>
              审批人
            </div>
            <div>
              <div class="condition-icon" @click="handleAddCopyNode">
                <el-icon class="iconfont copy">
                  <!-- 假设 Promotion 是导入的图标，这里需正确导入 -->
                  <Promotion/>
                </el-icon>
              </div>
              抄送人
            </div>
            <div>
              <div class="condition-icon" @click="handleAppendBranch">
                <el-icon class="iconfont condition">
                  <!-- 假设 Share 是导入的图标，这里需正确导入 -->
                  <Share/>
                </el-icon>
              </div>
              条件分支
            </div>
          </div>
        </template>
        <template #reference>
          <button class="btn" type="button">
            <el-icon>
              <Plus/>
            </el-icon>
          </button>
        </template>
      </el-popover>
    </div>
  </div>
</template>
<script setup>
import {defineProps} from 'vue';
import {hasBranch} from './util.js';
const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  isBranch: {
    type: Boolean,
    default: false
  },
  eventLancher: {
    type: Function,
    required: true
  }
});
const showButton = () => {
  let couldAddBranch = !hasBranch(props.data) || props.isBranch;
  let isEmpty = props.data.type === "empty";
  return !isEmpty || props.isBranch;
};
const handleAddApprovalNode = () => {
  props.eventLancher('addApprovalNode',
      props.data,
      props.isBranch);
};
const handleAddCopyNode = () => {
  props.eventLancher('addCopyNode',
      props.data,
      props.isBranch);
};
const handleAppendBranch = () => {
  props.eventLancher('appendBranch',
      props.data,
      props.isBranch);
};
</script>
<style lang="scss">
$bg-color: #f5f5f7;
$line-color: #CACACA;
$base-size: 12px;
@import "@/assets/styles/variables.module";
// 按钮变大效果
@mixin btn-bigger {
  transform: scale(1.2);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1);
}

.add-node-btn-box-popover {
  .condition-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    padding: 10px 20px;

    .condition-icon {
      width: 60px;
      height: 60px;
      line-height: 60px;
      border: 1px solid #e5e5e5;
      border-radius: 30px;
      box-sizing: border-box;
      font-size: 12px;
      cursor: pointer;
      margin-bottom: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .iconfont {
        font-size: 32px;

        &.approver {
          color: $approverCard;
        }

        &.copy {
          color: $copyCard;
        }

        &.condition {
          color: $conditionCard;
        }
      }
    }
  }
}


.add-node-btn-box {
  width: 220px;
  height: 100px;
  position: relative;
  padding-top: 30px;
  margin: auto;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: auto;
    width: 2px;
    height: 100%;
    background-color: $line-color;
  }

  .add-node-btn {
    display: flex;
    justify-content: center;

    .btn {
      width: 32px;
      height: 32px;
      border-radius: 15px;
      cursor: pointer;
      outline: none;
      background-color: #3296fa;
      border-color: transparent;
      transition: transform 0.5s;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;

      &:hover {
        @include btn-bigger;
      }
    }
  }

}
</style>
